<script setup>
import { ref } from "vue";
import { config } from "@/config";
import { post } from "@/request/request";

const loginForm = ref({
  jsCode: "",
  nickname: "",
  avatar: "",
});
const loginPopup = ref(null);

const bindBlurNickName = (e) => {
  loginForm.value.nickname = e.detail.value;
};

const onChooseAvatar = (e) => {
  uni.uploadFile({
    url: config.baseUrl + "avatarEdit",
    fileType: "image",
    name: "avatar",
    header: { "Content-Type": "multipart/form-data" },
    filePath: e.detail.avatarUrl,
    success: (res) => {
      const result = JSON.parse(res.data);
      console.log(result);
      loginForm.value.avatar = result.data;
    },
  });
};

const login = () => {
  uni.login({
    provider: "weixin",
    success: (loginRes) => {
      loginForm.value.jsCode = loginRes.code;
      post("miniLogin", loginForm.value).then((res) => {
        if (res.code === 200) {
          uni.setStorageSync("sessionKey", res.data.sessionKey);
          loginPopup.value.close();
          uni.reLaunch({
            url: "/pages/home/home",
          });
        }
      });
    },
  });
};

const openPopup = () => {
  loginPopup.value.open();
};

const closePopup = () => {
  loginPopup.value.close();
};

defineExpose({
  openPopup,
  closePopup,
});
</script>
<template>
  <uv-popup ref="loginPopup" mode="bottom" round="10">
    <view class="login-popup">
      <view class="title">باش رەسىم ۋە ئىىسم ئارقىلىق تىزىملىتىڭ</view>
      <view class="title-t">سىزنىڭ ئىسلىتىش تەسىراتىڭىزنىڭ تىخىمۇياخشى بولىسى ئۈچۈن باش رەسىم ۋە
        ئىسىم ئارقلىق تىزىملىتىپ كىرىڭ
      </view>
      <view class="button-box">
        <button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <view v-if="!loginForm.avatar">
            <image class="login-avatar" src="/static/login-avatar.svg" />
            <view class="camera">
              <image src="/static/camera.svg" />
            </view>
          </view>
          <view v-else>
            <image class="login-avatar" :src="loginForm.avatar" />
          </view>
        </button>
      </view>
      <view class="login-input">
        <input class="input" v-model="loginForm.nickname" type="nickname" @change="bindBlurNickName"
          placeholder="ئابۇنىت ئىسمى" style="
            height: 80rpx;
            background: none;
            display: flex;
            align-items: center;
            margin: 10rpx;
          " />
      </view>
      <view class="login-button">
        <button class="login-bth" :class="{ disabled: loginForm.nickname && loginForm.avatar }"
          :disabled="!loginForm.nickname && !loginForm.avatar" @click="login">
          تىزىملىتىش
        </button>
      </view>
    </view>
  </uv-popup>
</template>
<style scoped lang="scss">
.login-popup {
  width: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  direction: rtl;
  padding-top: 30rpx;

  .title {
    width: 684rpx;
    color: #111111;
    font-size: 32rpx;
  }

  .title-t {
    width: 684rpx;
    color: #999999;
    font-size: 26rpx;
  }

  .button-box {
    margin: 30rpx;
    width: 684rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .avatar-btn {
      height: 224rpx;
      width: 224rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;

      .login-avatar {
        width: 174rpx;
        height: 174rpx;
        border-radius: 9999rpx;
        position: relative;
      }

      .camera {
        width: 46rpx;
        height: 46rpx;
        border-radius: 9999rpx;
        background: #111111;
        position: absolute;
        bottom: 20rpx;
        right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 27rpx;
          height: 27rpx;
          position: absolute;
        }
      }
    }
  }

  .login-input {
    margin: 50rpx;
    background: #f6f6f6;
    border-radius: 20rpx;

    .input {
      width: 686rpx;
      height: 86rpx;
    }
  }

  .login-button {
    margin: 50rpx;
    width: 684rpx;

    .login-bth {
      width: 100%;
      height: 88rpx;
      background: #e2e2e2;
      color: #999999;
    }

    .disabled {
      background: #43A833;
      color: #ffffff;
    }
  }
}

button::after {
  border: none;
}
</style>
